<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
          css常用选择器：1 * 通配符选择器    选择所有元素。
                        2  元素名称   元素选择器
                        3  .类名   类选择器  (类选择器，可以写多个类选择器)
                        4  #id值   id选择器 （他是唯一的）
                        5  选择器1,选择器2, 选择器3   并集选择器
                        6  选择器1 选择器2 选择器1 后代选择器
     -->

   <style>

        /* 
        
        *{
            color:red;
        } */

          /*  元素选择器
          h1{
              color:red;
          } */

          /* p{
             color:green ; 
          } */

          /* 
            类选择器
          .show{ 
              color:paleturquoise
          } */

          /*
           id选择器
          #showGreen{
            color:greenyellow;
          } */
/* 
          .changeBig{
              /*font-size 设置字体的大写  */
                /* font-size: 30px; */
          /* }  */
      /*
       并集选择器
      h1,h2,h3{
          color:red;
      } */

     /* h1,p{
         color:red;
     } */
    /* 并集选择器 */
     /* h1,.show,h3{
        color:red;
     } */

   /* 
    div 下面的div 元素
   div div{
       color:red;
   } */

    div div p,span{
        color:red;
    }


   </style>

</head>

<body>
      <div>
        <h1>标题1</h1>
        <p class='changeBig show'>文章内容1111111</p>
    </div>
      <hr>
      <h2>标题2</h2>
      <p class='show'>文章内容22222222</p>
      <hr>
      <h3>标题3</h3>
      <p class="show" id="showGreen">文章内容333333333333333</p>
      <div>
          <div>
            <h1>div中div中的标题</h1>
            <p>div中div中的文章的内容44444444444444444</p> 
            <span>span的内容</span>
          </div>
          <h1>div中的标题</h1>
          <p class="changeBig">div中的文章的内容55555555555555555555</p>
      </div>
    
</body>
</html>